import { useTranslation } from 'react-i18next';
import { motion } from 'framer-motion';

export function AboutSection() {
  const { t } = useTranslation();

  return (
    <section id="about" className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="flex flex-col lg:flex-row items-center gap-12">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="lg:w-1/2"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
              {t('about.title')}
            </h2>
            <div className="w-16 h-1 bg-blue-500 mb-8 rounded-full"></div>
             <p className="text-lg text-gray-700 mb-6 leading-relaxed">
               {t('about.description')}
             </p>
             <p className="text-lg text-gray-700 mb-8 leading-relaxed">
               {t('about.teamDescription')}
            </p>
            {/* <div className="grid grid-cols-2 gap-6 mb-8">
              <div>
                <h3 className="text-3xl font-bold text-blue-500 mb-2">5000+</h3>
                <p className="text-gray-600">{t('about.merchants')}</p>
              </div>
              <div>
                <h3 className="text-3xl font-bold text-blue-500 mb-2">99.9%</h3>
                <p className="text-gray-600">{t('about.systemUptime')}</p>
              </div>
              <div>
                <h3 className="text-3xl font-bold text-blue-500 mb-2">10万+</h3>
                <p className="text-gray-600">{t('about.monthlyTransactions')}</p>²
              </div>
              <div>
                <h3 className="text-3xl font-bold text-blue-500 mb-2">24/7</h3>
                <p className="text-gray-600">{t('about.supportSystem')}</p>
              </div>
            </div> */}
            <a 
              href="#contact" 
              className="inline-flex items-center text-blue-500 font-medium hover:text-blue-600 transition-colors"
              >
                {t('about.learnMore')}
                <i className="fa-solid fa-arrow-right ml-2"></i>
            </a>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="lg:w-1/2 relative"
          >
            <div className="relative z-10 rounded-xl overflow-hidden shadow-2xl transform rotate-2 transition-transform hover:rotate-0 duration-500">
              <img 
                src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=modern%20office%20interior%2C%20payment%20technology%20company%2C%20professional%20team&sign=e482ee50944e51c5a7e8655d2a2a5cd5" 
                alt="豆豆Pay团队" 
                className="w-full h-auto"
              />
            </div>
            <div className="absolute top-10 -right-10 w-64 h-64 bg-blue-100 rounded-full -z-10"></div>
            <div className="absolute -bottom-10 -left-10 w-80 h-80 bg-indigo-100 rounded-full -z-10"></div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}